<template>
  <view class="addLiaison-box">
    <view class="addLiaison-content">
      <view class="content-box">
        <u-form :model="form" ref="uForm">
          <u-form-item label="联系人" label-width="120" prop="name">
            <u-input v-model="form.name" placeholder="请填写联系人姓名" />
           </u-form-item>
          <u-form-item label="联系电话" label-width="120" prop="telPhone">
            <u-input v-model="form.telPhone" placeholder="请填写联系电话" />
          </u-form-item>
        </u-form>
          <view class="content-tag">
            设置标签
          </view>
          <view class="content-text">
            <u-tag class="tags-text" :text="item.dictName" v-for='(item,dictValue) in drugRelationList' :key='dictValue'
             :type="drugRelation === item.dictValue?'primary':'info'" mode="plain" show="true" @click="tagClick(item)" />
          </view>
          <view class="content-default">
            <view class="default-left">
              <view class="default-text1">设置默认联系人</view>
              <view class="default-text2">提醒:每次下单都会默认推荐使用该联系人</view>
            </view>
            <u-switch :active-value="1" :inactive-value="0" @change="onChange" v-model="isDefault" active-color="#00CBCB" size="40rpx" :loading="loading"></u-switch>
          </view>
          <!-- <u-toast ref="uToast" /> -->
      </view>
    </view>
    <view class="addLiaison-button">
       <u-button  @click="conserve"  type="primary" shape="circle" >保存并使用</u-button>
  </view>
  </view>
</template>

<script>
import { mapActions,mapState } from 'vuex';

export default {
  data() {
			return {
        form: {
          name: '',
          telPhone: '',
        },
        // activeDefault:1,
        // inactiveDefault:0,
        selectDefaul:'0',
        isDefault: false,
        // dataType: [],
        arrTags:[],
        reqBody:[],
        // 选中的联系人标签
        drugRelation:'',
        rules:{
          name:[
            {required: true,message: '请输入联系人姓名',trigger: ['change','blur']},
          ],
           telPhone:[
            {required: true,message: '请输入联系人电话',trigger: ['change','blur']},
            {validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
              },
              message: '联系人电话不正确',
              trigger: ['change','blur'],
            }
          ]
        }
			}
		},
    onReady() {
		  this.$refs.uForm.setRules(this.rules);
      this.init()
	  },
    computed:{
      ...mapState({
				drugRelationList: state => state.shop.drugRelationList
			}),
       drugRelatioAnme(){
          this.drugRelationList.map(item=>{
          this.$set(item,'type','info')
          return item
         })
       }
    },
    methods:{
		  ...mapActions(['ActLiaisonPeople','ActGetAppDictList']),
      tagClick(item){
        this.drugRelation = item.dictValue
        this.drugRelation = item.dictValue
      },
      async init(){
        await this.ActGetAppDictList({
          dictType:'drug_relation',isCtr:'0'
        })
      },
      onChange(value){
        this.selectDefaul = value
      },
      conserve(){
        this.$refs.uForm.validate(async(valid) => {
          if(!valid){
            return
          }else{
            if(!this.drugRelation){
              this.$refs.uToast.show({
                title: '请选择标签',
              })
            }else{
              const formData = {
                name:this.form.name,
                telPhone:this.form.telPhone,
                drugRelation:this.drugRelation,
                isDefault:this.selectDefaul
              }
              const reqBody = []
              reqBody.push(formData)
              const res1 = await this.ActLiaisonPeople(reqBody)
                if(res1.success){
                  this.$store.dispatch('ActGetLiaisonList')
                  uni.navigateBack()
                }
            }
          }
        })
      },
    },
    mounted () {
      // this.getTag()
    }
}
</script>

<style lang="scss" scoped>
page {  
	height: 100%;
	background-color: #f6f6f6;
}
.addLiaison-box{
  margin: 0 24rpx;
  .addLiaison-content{
    padding: 0 24rpx;
    border-radius: 16rpx;
    background-color:#FFF;
    margin-top: 24rpx;
    .content-box{
      u-form-item{
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
      }
      .content-tag{
        padding-top: 28rpx;
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
      }
      .content-text{
        padding: 32rpx 0 32rpx;
        border-bottom: 2rpx solid #F6F6F6;
        .tags-text{
          margin: 12rpx;
        }
      }
      .content-default{
        display: flex;
        padding: 24rpx 0;
        .default-left{
          .default-text1{
            color: #333333;
            font-weight: 500;
            font-size: 28rxp;
          }
          .default-text2{
            font-size: 18rxp;
            margin-top: 12rpx;
          }
        }
        u-switch{
          margin-left: 48rpx;
        }
      }
    }
  }
  .addLiaison-button{
    padding-top: 48rpx;
  }
}
</style>